<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery样式操作css</title>
</head>
<body>
  <div id='box'>这是内容</div>
  <div class="box">这是类选择器的box</div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //css方法的使用：
    // -jQuery设置的样式 是行内样式
    // 1. 设置的方式
    // 1.1 单个样式设置
    // -注意：样式名称推荐使用驼峰结构
    //        样式值推荐使用数值形式
    $('#box').css('width',100).css('height','100px');
    $('#box').css('backgroundColor','red');
    $('#box').css('font-size',30);

    // 1.2 多个样式设置
    $('.box').css({
      width: 200,
      height: '200px',
      backgroundColor: 'pink',
      fontSize: 30
    });
    
    // 2.获取方式
    //  - 任意位置设置的样式都可以获取(不管是行内样式 还是写在head标签中的style标签中的样式)
    //  - 结果是字符串类型，有单位(如果样式有单位就有单位) - 在控制台打印的黑色的字体 代表字符串
    //  - 其他注意点：只能获取单个样式，同时不准进行隐式迭代 (每次只能取一个样式,不能一起获取多个样式,也不能偷偷的遍历)
    console.log($('#box').css('width')); //100px(如果获取到的元素样式有单位的就有单位 控制台打印出的是黑色字体 代表字符串)
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery通过操作类名修改样式</title>
  <style>
    .fl{
      float: left;
    }
    .colorRed{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    var $box = $('#box');
    //1.添加类名 addClass()
    $box.addClass('fl');
    $box.addClass('colorRed');
    //使用addClass()方式可以传递多个类名 中间用空格 隔开
    $box.addClass('fl colorRed abc');

    //2.移除类名 removeClass()
    $box.removeClass();//移除所有类名(括号中不写任何类名 代表移除全部样式)
    $box.removeClass('colorRed');//指定类名移除
    $box.removeClass('abc fl');//多个类名移除(不需要考虑书写顺序)
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery通过操作类名修改样式</title>
  <style>
    .fl{
      float: left;
    }
    .colorRed{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box" class=" colorPink abc dd"></div>
  <div class="ccc"></div>
  <div></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    var $box = $('#box');
    // 3.切换类名 toggleClass()
    // - 会判断传入的类名是否存在，如果存在会被删除，如果不存在，会被添加
    $box.toggleClass('colorRed');
    $box.toggleClass('vvv');
    $box.toggleClass('colorRed vvv');

    // 4.检测类名是否存在 hasClass()
    // - 如果类名存在，返回true
    // - 如果类名不存在，返回false
    // -推荐使用方式：
    console.log($box.hasClass('colorPink'));//true

    //多个类名检测时，可能由于书写顺序问题，导致检测为false(尽管多个类名都存在)
    // - 不推荐进行多个类名同时检测
    console.log($box.hasClass('colorPink abc'));//true
    console.log($box.hasClass('dd colorPink abc'));//false

    //多个元素同时进行类名检测时，只要某个元素具有类名即可返回true
    //(例如检测所有div中是否都存在这个类名 没有这个类名的也会返回true 不推荐使用)
    // - 非特殊情况下，不推荐使用
    console.log($('div').hasClass('colorPink'));//true
    console.log($('div').hasClass('ccc'));//true
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery动画操作一</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      background-color: green;
      display: none;
    }
  </style>
</head>
<body>
  <button id="btn1">显示</button>
  <button id="btn2">隐藏</button>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //show 和 hide在不传参数时，没有动画效果，仅仅表示显示和隐藏
    // - 参数一：运动时间，单位(毫秒)，默认400ms
    // - 还支持字符串参数(了解，不常用)：'fast' 200  'normal' 400 'slow' 600
    //    - 其他字符串组合均识别为 例如：'haha' 400
    // - 参数二：函数，表示运动完毕后执行的操作

    $('#btn1').click(function(){
      $('#box').show(600,function(){
        console.log('运动完毕了，我显示了');
      });
    });

    $('#btn2').click(function(){
      $('#box').hide(1000,function(){
        console.log('我隐藏完毕了');
      });
    })
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery动画操作二</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      background-color: green;
      display: none;
    }
  </style>
</head>
<body>
  <button id="btn1">动画1</button>
  <button id="btn2">动画2</button>
  <button id="btn3">动画3</button>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // slide
    //  - slide组动画不传参也可以进行运动
    //  - slideDown() 滑入，下拉
    //  - slideUp() 滑出，上拉
    //  - slideToggle() 切换
    //  -参数：
    //   - 参数一：运动时间，默认 400ms
    //   - 参数二：函数，表示运动完毕后执行的操作
    
    $('#btn1').click(function(){
      $('#box').slideDown(1000,function(){
        console.log('我的下拉动作 执行完毕了');
      });
    });
    $('#btn2').click(function(){
      $('#box').slideUp(1200,function(){
        console.log('我是上拉动作 执行完毕了');
      });
    });
    $('#btn3').click(function(){
      //根据元素当前显示效果，执行不同的操作
      // - 如果元素隐藏，执行slideDown()
      // - 如果元素显示，执行slideUP()
      $('#box').slideToggle(2000,function(){
        console.log('我切换了');
      });
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery动画操作三</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      background-color: green;
      display:none;
    }
  </style>
</head>
<body>
  <button id="btn1">动画1</button>
  <button id="btn2">动画2</button>
  <button id="btn3">动画3</button>
  <button id="btn4">动画4</button>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //fade组动画
    // - fadeIn() 渐入操作
    // - fadeOut() 渐出操作
    // - fadeToggle() 切换
    // - fadeTo() 渐变到什么程度(透明度值)
    // - 参数：
    //   - 参数一：运动时间，默认 400ms
    //   - 参数二：函数，运动完毕后执行的操作
    $('#btn1').click(function(){
      $('#box').fadeIn(1000,function(){
        console.log('渐入完毕了');
      });
    });

    $('#btn2').click(function(){
      $('#box').fadeOut();
    });

    $('#btn3').click(function(){
      $('#box').fadeToggle(1500,function(){
        console.log('我切换完毕了');
      });
    });

    $('#btn4').click(function(){
      //指定透明度渐变
      // - 参数二，是要设置的透明度值
      // 由于fadeTo方法进行透明度运动后，会对其他的动画造成影响
      // - 推荐使用自定义动画进行操作
      $('#box').fadeTo();
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery自定义动画操作</title>
  <style>
    #box{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
    }
  </style>
</head>
<body>
  <button id="btn">按钮</button>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //animate() 自定义动画函数(使用最多，需要)
    // - 参数1(必选)：对象形式，用来设置要运动的样式和值
    // - 参数2：运动时间，默认 400
    // - 参数3：运动模式，默认 'swing'表示变速运动 'linear'表示匀速运动
    // - 参数4：函数，运动完毕后执行的操作
    $('#btn').click(function(){
      $('#box').animate({
        width: 200,
        height: 200,
        left: 700,
        top: 100,
      },4000,'linear',function(){
        alert('运动完毕了，呵呵呵');
      });
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery中stop操作</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      background-color:yellowgreen;
    }
  </style>
</head>
<body>
  <button id="btn1">点击设置动画</button>
  <button id="btn2">点击停止动画</button>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //设置按钮1点击后，给box设置多个动画，使其形成动画队列的形式
    $('#btn1').click(function(){
      $('#box').slideDown(1000).slideUp(1000).slideDown(1000).slideUp(1000).slideDown(1000).slideUp(1000);
    });
    //设置按钮2点击后，执行stop方法，观察效果
    $('#btn2').click(function(){
      //stop()用来设置某个元素动画的停止方式
      // - 参数1：是否清楚动画队列，布尔值，默认false
      //  - 设置为 true时，类似于'暂停'效果
      $('#box').stop(true);
      
      // - 参数2：是否显示到最终的运动效果，布尔值，默认false
      //  - 设置为 true后，会导致显示效果出现'跳'的情况，不和谐，不推荐使用
      $('#box').stop(true,true);

      // !!常用的stop()使用形式
      // - 两个参数均采用false,由于默认均为false,可以不写参数
      // - 设置位置：将stop()设置在新动画之前即可(因为stop()是结束旧动画后 在执行新动画)
      $('#box').stop();
    })
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery中index()方法的使用</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
  </ul>
  <ul>
    <li>这些是li</li>
    <li id="item">这些是li</li>
    <li>这些是li</li>
    <li>这些是li</li>
  </ul>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //index() 用于获取某个元素在同级元素中的索引
    console.log($('#item').index());//1
    //注意：取得的索引一定是基于同级元素，与获取方式无关
    console.log($('li'));
    console.log($('li').eq(4).index());//2
  </script>
</body>
</html> -->